/**
  * 定义gird布局样式
  * columns 12
  * spaces [xs, sm, default, md, lg]
  *
  */

@mixin gen_grid-item($columns: 12) {
  @for $i from 2 through $columns {
    &.column_#{$i} {
      $width: calc(100% / #{$i});
      > .grid-item {
        width: $width;
      }

      @for $j from 1 through $i {
        & > .grid-item.column_#{$j} {
          width: calc($width * #{$j}) !important;
        }
      }
    }
  }
}

@mixin gen_grid($columns: 12, $spaceMap) {
  .cell-grid {
    display: flex;
    flex-wrap: wrap;

    > .grid-item {
      width: 100%;
      padding: 0;
      margin: 0;
    }

    @for $i from 2 through $columns {
      &.column_#{$i} {
        $width: calc(100% / #{$i});
        > .grid-item {
          width: $width;
        }

        @for $j from 1 through $i {
          & > .grid-item.column_#{$j} {
            width: calc($width * #{$j}) !important;
          }
        }
      }
    }

    @each $key, $val in $spaceMap {
      &.gap_#{$key} {
        padding: calc($val/2);

        &.gap_clear {
          margin: -$val;
        }
        > .grid-item {
          padding: calc($val/2);
        }
      }

      &.gap-x_#{$key} {
        padding-left: calc($val/2);
        padding-right: calc($val/2);

        &.gap_clear {
          margin-left: -$val;
          margin-right: -$val;
        }

        > .grid-item {
          padding-left: calc($val/2);
          padding-right: calc($val/2);
        }
      }

      &.gap-y_#{$key} {
        padding-top: calc($val/2);
        padding-bottom: calc($val/2);

        &.gap_clear {
          margin-top: -$val;
          margin-bottom: -$val;
        }

        > .grid-item {
          padding-top: calc($val/2);
          padding-bottom: calc($val/2);
        }
      }
    }

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) and (max-width: 767.98px) {
      @for $i from 2 through $columns {
        &.column-xs_#{$i} {
          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) and (max-width: 991.98px) {
      @for $i from 2 through $columns {
        &.column-sm_#{$i} {

          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) and (max-width: 1199.98px) {
      @for $i from 2 through $columns {
        &.column-md_#{$i} {

          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    // // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) and (max-width: 1699.98px) {
      @for $i from 2 through $columns {
        &.column-lg_#{$i} {

          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    @media (min-width: 1600px) {
      @for $i from 2 through $columns {
        &.column-xl_#{$i} {

          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }
  }
}
